“Alfa” Documentation by “IG_design” v1.0
“Alfa - Responsive Parallax Template”
Created: 16/03/2013
By: Ivan Grozdic aka IG_design
Email: ivang.design@yahoo.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Table of Contents
A) HTML - top
Navigation
<div class="nav-container"> <ul> <li> <a href="#home" class="scroll"><span>Home</span></a> </li> <li> <a href="#about" class="scroll"><span>About Us</span></a> </li> <li> <a href="#services" class="scroll"><span>Services</span></a> </li> <li> <a href="#works" class="scroll"><span>Works</span></a> </li> <li> <a href="#gallery" class="scroll"><span>Gallery</span></a> </li> <li> <a href="#contact" class="scroll"><span>Contact</span></a> </li> </ul> </div>
B) CSS Files and Structure - top
This theme uses 4 css files contained in the css folder
Css files:
base
layout
skeleton
jquery.fancybox
Css file layout:
ABOUT:
#about{
background:#4d4646;
position:relative;
padding-bottom:100px;
}
#about h1{
padding-top:20px;
}
#about h5{
font-family: 'OpenSans-Light-webfont';
color: #e0e0e0;
font-size:22px;
line-height:32px;
font-weight:100;
padding-bottom:50px;
}
#about span{
color:#b8b2b2;
-webkit-transition : all 0.4s ease-out;
-moz-transition : all 0.4s ease-out;
-o-transition :all 0.4s ease-out;
transition : all 0.4s ease-out;
}
#about span:hover{
color:#FA9600;
}
/* #Progress Bar */
.pro-bar-wrap {
position:relative;
text-align:left;
}
.pro-bar {
position:relative;
}
.caption{
z-index:3;
position:absolute;
margin:0 auto;
text-align:center;
margin-left:10px;
}
.caption div{
font-size:18px;
line-height:40px;
font-family: 'OpenSans-Light-webfont';
font-weight:normal;
color:#fff;
text-shadow: 0 1px 1px #000 inset, 0 1px 0 #444;
}
.progress-bar {
height: 36px;
padding: 2px;
width: 100%;
margin: 15px 0;
}
.progress-bar span {
display: inline-block;
height: 100%;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
.orange span {
background-color: rgba(250,105,0,.7);
}
.stripes span {
-webkit-background-size: 38px 38px;
-moz-background-size: 38px 38px;
background-size: 38px 38px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
-webkit-animation: animate-stripes 3s linear infinite;
-moz-animation: animate-stripes 3s linear infinite;
}
@-webkit-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
@-moz-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
Services:
#services{
background:#383636;
position:relative;
padding-top:100px;
padding-bottom:100px;
}
#services h5{
font-family: 'OpenSans-Light-webfont';
color: #e0e0e0;
font-size:22px;
line-height:32px;
font-weight:100;
padding-bottom:50px;
}
.heading-and-icon {
width:100%;
margin-bottom:20px;
height:60px;
}
.heading-and-icon img{
float:left;
margin-right:15px;
}
.heading-and-icon h6 {
padding-top:15px;
}
.b-small {
color: #fff;
padding: 0px 15px 0px 15px;
background:rgba(250,105,0,.7);
height:35px;
text-align:center;
display:inline-block;
line-height:35px;
margin-top:10px;
-webkit-transition : all 0.2s ease-out;
-moz-transition : all 0.2s ease-out;
-o-transition :all 0.2s ease-out;
transition : all 0.2s ease-out;
}
.b-small:hover {
background:#423b3b;
color:#fff;
opacity:1;
}
#services-list{
position:relative;
text-align:left;
}
#services-list li{
padding-left:26px;
}
#services-list h6{
font-size: 26px;
line-height: 30px;
}
.arrow-list{
background:url('../images/arrow-list.png')no-repeat center left;
}
.checkmark-list{
background:url('../images/checkmark-list.png')no-repeat center left;
}
#services-list img{
margin:0 auto;
width: 100%;
height: auto;
}
WORKS:
#works{
background:#4d4646;
position:relative;
padding-top:100px;
padding-bottom:100px;
}
#works h5{
font-family: 'OpenSans-Light-webfont';
color: #e0e0e0;
font-size:22px;
line-height:32px;
font-weight:100;
padding-bottom:50px;
}
#works span{
-webkit-transition : all 0.4s ease-out;
-moz-transition : all 0.4s ease-out;
-o-transition :all 0.4s ease-out;
transition : all 0.4s ease-out;
}
#works span:hover{
color:#FA6900;
}
#works p{
text-align:justify;
}
.works-line{
background:url('../images/line-works.png')no-repeat center center;
height:112px;
}
/* #Slider */
.cbp-fwslider {
position: relative;
margin: 0;
overflow: hidden;
padding: 0;
}
.cbp-fwslider ul {
margin: 0;
padding: 0;
white-space: nowrap;
list-style-type: none;
}
.cbp-fwslider ul li {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
float: left;
display: block;
margin: 0;
padding: 0;
}
.cbp-fwslider ul li >,
.cbp-fwslider ul li > div {
display: block;
text-align: center;
outline: none;
}
.cbp-fwslider ul li > img {
border: none;
display: block;
margin: 0 auto;
max-width: 100%;
}
.cbp-fwslider nav span {
position: absolute;
top: 50%;
width: 40px;
height: 50px;
background: rgba(0,0,0,.3);
color: #fff;
font-size: 30px;
text-align: center;
margin-top: -25px;
line-height: 50px;
cursor: pointer;
font-weight: normal;
}
.cbp-fwslider nav span:hover {
background: rgba(0,0,0,.9);
}
.cbp-fwslider nav span.cbp-fwnext {
right: 0px;
}
.cbp-fwslider nav span.cbp-fwprev {
left: 0px;
}
.line-sep{
margin-top:50px;
margin-bottom:50px;
border-top:1px solid rgba(0,0,0,.3);
}
.info-works{
padding-top:20px;
position:relative;
}
.info-works p{
text-align:left;
float:left;
display: inline-block;
}
a.inner-button-works {
float:right;
margin-top:10px;
display: inline-block;
font-family:'OpenSans-Light-webfont';
font-style: normal;
font-weight: 100;
font-size: 16px;
color: #fff;
padding: 4px;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
text-align: center;
background: rgba(250,105,0,.7);
width: 160px;
padding: 10px 0;
}
a.inner-button-works:hover {
background: #423b3b;
}
@media screen and (max-width: 959px) {
a.inner-button-works {
float:left;
display:block;
}
.info-works p{
display:inline;
padding-right:20px;
}
}
C) Image Files - top
All the graphic elements for the entire theme are contained at the "images" folder.
D) JavaScript - top
All the pages link the neccessary js files inside the "head" tag of the document. If you need to modify the behavior from a certain jquery element open the "js" folder where you can alter the parameters of some of the js elements.
E) Sources and Credits - top
I've used the following images, icons or other files as listed.
JAVASCRIPT
FONTS
Once again, thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
IG_design